<template>
  <view style="position: relative;height: 100%;width: 100%;">
    <map class="map"
      v-if="mapProps.longitude && mapProps.latitude"
      :scale="mapProps.scale"
      :latitude="mapProps.latitude"
      :longitude="mapProps.longitude"
      :show-location="mapProps.showLocation"
      :markers="mapProps.markers"
      @regionchange="regionChangeHandler"
    />
    <view class="map-loading" v-else>
      <u-loading-icon  mode="circle" text="地图加载中..." size="16" textSize="16"></u-loading-icon>
    </view>
<!--    <image style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px" src="/static/map-center-location.svg"/>-->
    <view :class="['map-center-location', mapChangState]"></view>
  </view>
</template>

<script setup lang="ts">

import iconPath from '@/static/map-charing.png'
import { reactive, ref, watch } from 'vue';
import uLoadingIcon from 'uview-ui/components/u-loading-icon/u-loading-icon.vue'
import { useLocationStore } from '@/store/location'

const locationStore = useLocationStore()


const mapProps = reactive({
	latitude: 0,
	longitude: 0,
	scale: 18,
	showLocation: true,
	setting: {
		skew: 0,
		rotate: 0,
		showLocation: true,
		showScale: false,
		subKey: '',
		layerStyle: 1,
		enableZoom: true,
		enableScroll: true,
		enableRotate: false,
		showCompass: false,
		enable3D: false,
		enableOverlooking: false,
		enableSatellite: false,
		enableTraffic: false,
	},
	markers: [
		{
			id: 1, // 标记点 id, 点击事件回调会返回此 id。
			latitude: 39.96033,
			longitude: 116.29845,
			iconPath: iconPath,
			width: 40,
			height: 40,
			callout: {
				content: '这是content文案',
				display: 'ALWAYS',
				borderWidth: 11,
				borderRadius: 4,
				borderColor: '#FFFFFF',
				bgColor: '#FFFFFF'
			}
		},
		{
			id: 2, // 标记点 id, 点击事件回调会返回此 id。
			latitude: 39.96030,
			longitude: 116.29845,
			iconPath: iconPath,
			width: 40,
			height: 40,
			callout: {
				content: '这是content文案',
				display: 'ALWAYS',
				borderWidth: 11,
				borderRadius: 4,
				borderColor: '#00FF00',
				bgColor: '#00FF00'
			}
		}
	]
})

const centerLocation = reactive({
  latitude: 0,
  longitude: 0
})

locationStore.refreshUserLocation().then(res => {
	const { latitude, longitude } = res
	mapProps.latitude = latitude
	mapProps.longitude = longitude
	
	mapProps.markers[0].latitude = latitude + 0.0006
	mapProps.markers[0].longitude = longitude
	
	centerLocation.latitude = latitude
	centerLocation.longitude = longitude
})

const mapChangState = ref('init' as 'init' | 'region' | 'stay')
function regionChangeHandler(e: any) {
  if (e.detail.type === 'end') {
    mapChangState.value = 'stay'
    const currentCenterLocation = e.detail.centerLocation
    centerLocation.latitude = currentCenterLocation.latitude
    centerLocation.longitude = currentCenterLocation.longitude
  } else {
    mapChangState.value = 'region'
  }
}

watch(centerLocation, val => {
	console.log('地图中心点变化', val)
})


/**
 * TODO 归位按钮功能、根据缩放等级计算半径
 */

defineExpose({
  mapProps,
  regionChangeHandler,
  mapChangState
})
</script>

<style lang="scss" scoped>
.map {
	width: 100%;
	height: 100%;
}
.map-loading {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
}
.map-center-location {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 6px $u-theme-color solid;
  &::before {
    content: '';
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    height: 15px;
    width: 2px;
    background: $u-theme-color;
    border-radius: 0 0 1px 1px;
  }
  &::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 50%;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    transform: translateX(-50%) scaleY(0.3);
    background: $u-theme-color;
  }
}
.map-center-location.region {
  &::after {
    opacity: 0;
  }
}

.map-center-location.stay {
	animation: stayAnim 0.2s;
	&::after {
	  opacity: 1;
	}
}

@keyframes stayAnim {
	0% {
		transform: translate(-50%, -70%);
	}
	25% {
		transform: translate(-50%, -120%);
	}
	50% {
		transform: translate(-50%, -70%);
	}
	75% {
		transform: translate(-50%, -80%);
	}
	100% {
		transform: translate(-50%, -70%);
	}
}


</style>